import React, { useEffect, useState } from 'react'
import { TabBar } from "antd-mobile";
import { AppOutline, MessageOutline, MessageFill, UserOutline, } from "antd-mobile-icons";
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
function App() {

  const location = useLocation();
  const showTabbar = location.pathname.split("/").length;
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState(location.pathname);

  useEffect(() => {
    if (location.pathname === activeKey) {
      return;
    } else {
      navigate(activeKey);
    }
  }, [activeKey]);
  const tabs = [
    {
      key: "/home",
      title: "首页",
      icon: <AppOutline />
    },
    {
      key: "/service",
      title: "服务",
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />)
    },
    {
      key: "/login",
      title: "我的",
      icon: <UserOutline />
    },
  ]
  return (
    <div style={{ height: "100vh", overflow: "hidden" }}>
      <Outlet> </Outlet>

      {showTabbar <= 2 && (
        <>
          <TabBar style={{ position: "fixed", bottom: 0, left: 0, width: "100vw", backgroundColor: "white" }} activeKey={location.pathname} onChange={(e) => setActiveKey(e)}>
            {tabs.map((item) => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
        </>
      )}
    </div>

  )
}
export default App
